<template>
  <div style="display: inline-block">
    <div>
      <el-button :size="size" type="text" @click="toSelect">
        {{ buttonName }}
      </el-button>
    </div>
    <div v-if="selectList.length != 0">
      <el-table
        class="my-table m-t-10"
        :data="selectList"
        border
        :header-cell-style="{ background: '#eee', color: '#000' }"
      >
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column label="加注机编号">
          <template v-slot="scope">{{
            scope.row.macCode | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{
            scope.row.siteName | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template v-slot="scope">
            <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="removeMachine(scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="buttonName"
      append-to-body
      :visible.sync="showFlag"
      width="1000px"
    >
      <div class="flex-center">
        <div class="flex-start">
          <span class="m-r-10">地址</span>
          <app-address style="height: 32px" @change="addressChange" />
        </div>
        <div class="flex-start">
          <el-input
            size="small"
            class="m-r-10"
            placeholder="输入关键字"
            style="width: 300px"
            v-model="search.queryStr"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            type="primary"
            @click="query"
            >查询</el-button
          >
        </div>
      </div>
      <el-table
        v-if="refreshFlag > 0"
        ref="fillingMachineSelectContentTableRef"
        class="my-table m-t-30 w-100"
        :data="data"
        v-loading="loading"
        height="350"
        border
        :header-cell-style="{ background: '#eee', color: '#000' }"
      >
        <el-table-column align="center" width="43">
          <template v-slot="scope">
            <el-checkbox
              v-if="canBeSelect(scope.row)"
              v-model="scope.row._selected"
              @change="selectChange(scope.row)"
              >{{ "" }}
            </el-checkbox>
            <i
              class="el-icon-warning c-gray"
              v-else
              title="已被其他集群选择或者没有安装到加注站"
            ></i>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column label="加注机编号" width="180">
          <template v-slot="scope">{{
            scope.row.macCode | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{
            scope.row.siteName | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column prop="ureaPrice" label="销售单价(元)" width="180" />
      </el-table>
      <app-pagination
        ref="paginationRef"
        :total="total"
        :page-size="page.size"
        class="m-t-20"
        @change="pageChange"
      />
      <div class="dividing-line m-t-30"></div>
      <div class="m-t-30 flex-end">
        <el-button type="primary" plain @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import { getPage } from "@/api/business/filling-machine";
import {
  equals,
  getRecords,
  getTotal,
  isListEmpty,
  isStringEmpty,
  isTrue,
  isNotNull,
  isNull,
  listRemove,
} from "@/util/common-util";
import AppAddress from "@/components/business/app-address";

export default {
  name: "select-filling-machine-text-button",
  components: { AppAddress, AppPagination },
  props: {
    buttonName: {
      type: String,
      default: "选择加注机",
    },
    initSelectList: {
      type: Array,
      default: () => [],
    },
    size: {
      type: String,
      default: "small",
    },
    isCluster: {
      type: Boolean,
      default: false,
    },
    curClusterId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showFlag: false,
      loading: false,
      data: [],
      search: {
        districtCode: null,
        cityCode: null,
        provinceCode: null,
        queryStr: null,
      },
      page: {
        size: 20,
        current: 1,
      },
      total: 0,
      value: null,
      refreshFlag: 1,
      selectList: [],
      hasClusterId: false,
    };
  },
  created() {
    if (isStringEmpty(this.curClusterId)) {
      this.hasClusterId = false;
    } else {
      this.hasClusterId = true;
    }
    this.selectList = this.initSelectList;
  },
  methods: {
    canBeSelect(_row) {
      if (isNull(_row.siteId)) return false;
      if (isTrue(this.hasClusterId)) {
        if (equals(_row.clusterId, this.curClusterId)) return true;
        if (isNotNull(_row.clusterId)) return false;
      }
      return true;
    },
    initByDefaultValue(_initValue) {
      if (isListEmpty(_initValue)) return;
      this.selectList = _initValue;
    },
    addressChange(region) {
      this.search.provinceCode = region.province;
      this.search.cityCode = region.city;
      this.search.districtCode = region.area;
      this.query();
    },
    cancel() {
      this.showFlag = false;
    },
    toSelect() {
      this.showFlag = true;
      this.query();
    },
    query() {
      this.loading = true;
      if (isTrue(this.isCluster)) {
        this.search.isClusterSelectFillMachine = true;
      }
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.initSelected();
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    initSelected() {
      for (const item of this.data) {
        item._selected = false;
      }
      if (isListEmpty(this.initSelectList)) return;
      for (const item of this.data) {
        for (const selectItem of this.initSelectList) {
          if (selectItem.id == item.id || selectItem.macCode == item.macCode) {
            item._selected = true;
          }
        }
      }
    },
    selectChange(_row) {
      //row._selected
      if (_row._selected) {
        this.putSelectedIfNotExists(_row);
      } else {
        this.selectList = this.selectList.filter((item) => item.id != _row.id);
      }
      this.refreshFlag = 0;
      this.$nextTick(() => {
        this.refreshFlag = 1;
      });
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    save() {
      for (const item of this.data) {
        if (isTrue(item._selected)) {
          this.putSelectedIfNotExists(item);
        }
      }
      this.$emit("change", this.selectList);
      this.showFlag = false;
    },
    putSelectedIfNotExists(_row) {
      var f = false;
      for (const s of this.selectList) {
        if (s.id == _row.id || s.macCode == _row.macCode) {
          f = true;
          break;
        }
      }
      if (!f) {
        this.selectList.push({
          id: _row.id,
          macCode: _row.macCode,
          siteName: _row.siteName,
        });
      }
    },
    removeMachine(_index) {
      listRemove(this.selectList, _index);
      this.$emit("select", this.selectList);
    },
  },
};
</script>
<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }

  ::v-deep th {
    padding: 8px 0 !important;
  }
}
</style>
